<template>
    <div>
        <div id="mycharts" style="width:50%;height:500px"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getHistoryNetWorth } from '@/api/fund'
export default {
    name: 'FundDetail',
    data() {
        return {
            chartsOption: {
                title: {
                    text: '净值',
                    x: 'left',
                },
                xAxis: {
                    data: [],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: [],
                        type: 'line',
                        color: '#70a2fc',
                        name: '净值',
                    },
                ],
                tooltip: {
                    show: true,
                },
            },
            chartsData: [],
            charts: {},
        }
    },
    computed: {
        xAxisData() {
            return this.chartsData.map((item) => {
                return item.updateDate
            })
        },
        seriesData() {
            return this.chartsData.map((item) => {
                return item.fundAmount
            })
        },
    },
    mounted() {
        getHistoryNetWorth(this.$route.query.fundId).then((res) => {
            this.chartsData = res.data.data
            this.chartsOption.xAxis.data = this.xAxisData
            this.chartsOption.series[0].data = this.seriesData
            let myCharts = document.getElementById('mycharts')
            this.charts = echarts.init(myCharts)
            this.charts && this.charts.setOption(this.chartsOption)
            window.addEventListener('resize', () => {
                this.charts.resize()
            })
        })
    },
}
</script>

<style>
</style>